<template>
    <div class="turn-time-page">
        <div
            v-for="(item, index) in orderNum"
            :key="index"
            :class="{
                'number-item': !isNaN(item),
                'mark-item': isNaN(item),
            }"
        >
            <span v-if="!isNaN(item)" class="num numItem">0123456789</span>
            <span class="comma" v-else>{{ item }}</span>
        </div>
    </div>
</template>
<script>
import { ref, computed, watch } from "vue";
export default {
    props: {
        time: {
            type: Number,
            default: () => 0,
        },
    },
    setup(props) {
        const time = computed({
            get: () => props.time,
        });
        return {
            time,
            orderNum: ref([]),
        };
    },
    watch: {
        time(newVal) {
            this.toOrderNum(newVal);
        },
    },
    mounted() {
        this.toOrderNum(this.time);
    },
    methods: {
        //翻页动画
        setNumberTransform() {
            const numberArr = this.orderNum.filter((item) => !isNaN(item));
            const _numberItem = document.getElementsByClassName("num");
            for (let index = 0; index < _numberItem.length; index++) {
                let _num = parseInt(numberArr[index]);
                _numberItem[index].style.top = `-${(_num) * 72}px`;
            }
        },
        //格式化时间
        toOrderNum(num) {
            num = num.toString();
            // 把订单数变成字符串
            if (num.length < 6) {
                num = "0" + num; // 如未满八位数，添加"0"补位
                this.toOrderNum(num); // 递归添加"0"补位
            } else if (num.length === 6) {
                // 订单数中加入逗号
                num =
                    num.slice(0, 2) +
                    ":" +
                    num.slice(2, 4) +
                    ":" +
                    num.slice(4, 7);
                this.orderNum = num.split(""); // 将其便变成数据，渲染至滚动数组
                this.$nextTick(() => this.setNumberTransform());
            }
        },
    },
};
</script>
<style lang="less">
.turn-time-page {
    position: relative;
    height: 72px;
    box-sizing: border-box;
    font-size: 60px;
    line-height: 48px;
    text-align: center;
    list-style: none;
    color: #fff;
    writing-mode: vertical-lr;
    text-orientation: upright;
    user-select: none;
    /* 默认逗号设置 */
    .mark-item {
        width: 10px;
        height: 75px;
        margin-right: 8px;
        line-height: 10px;
        font-size: 48px;
        position: relative;
        color: fade(#fff, 50%);
        & > span {
            position: absolute;
            width: 100%;
            top: 0;
            writing-mode: vertical-rl;
            text-orientation: upright;
        }
    }
    /*滚动数字设置*/
    .number-item {
        width: 48px;
        height: 72px;
        list-style: none;
        margin-right: 8px;
        border-radius: 2px;
        box-sizing: border-box;
        border: 1px solid var(--primary-color);
        box-shadow: inset 0 0 10px var(--primary-color);
        overflow: hidden;
        position: relative;
        &::before {
            content: "";
            position: absolute;
            display: block;
            height: 2px;
            width: 70%;
            top: 50%;
            background-color: var(--primary-color);
            opacity: 0.6;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .num {
            position: absolute;
            top: 0;
            width: 48px;
            transition: all 0.5s ease-in-out;
        }
        &:last-child {
            margin-right: 0;
        }
    }
}
</style>
